<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>教师管理 - 学生教师管理系统</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->


</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<!-- 导航栏容器 -->
<div id="navbarContainer"></div>

<!-- 教师管理内容 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <div id="teachersSection">
        <div class="bg-white/80 rounded-lg shadow-lg overflow-hidden mb-8">
            <div class="bg-secondary p-4">
                <h2 class="text-white/90 text-xl font-bold flex items-center">
                    <i class="fa fa-briefcase mr-2"></i> 教师列表
                    <button class="ml-auto bg-white/80 text-secondary px-4 py-1 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors"
                            id="addTeacherBtn">
                        <i class="fa fa-plus mr-1"></i> 添加教师
                    </button>
                </h2>
            </div>
            <div class="p-4">
                <div class="flex justify-between mb-4">
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-search"></i>
                            </span>
                        <input class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200" id="teacherSearch" placeholder="搜索教师..."
                               type="text">
                    </div>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-1 rounded-md text-sm font-medium transition-colors"
                            id="refreshTeachers">
                        <i class="fa fa-refresh mr-1"></i> 刷新
                    </button>
                </div>
                <!-- 教师表格（新增班级列） -->
                <div class="overflow-x-auto" id="teachersTable">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                教师ID
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                姓名
                            </th>
                            <!-- 新增班级列 -->
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                班级
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                年龄
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                性别
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                科目
                            </th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody class="bg-white/80 divide-y divide-gray-200" id="teachersBody">
                        <tr class="text-center">
                            <td class="px-6 py-12 text-gray-500" colspan="7">
                                <i class="fa fa-spinner fa-spin text-2xl mb-2"></i>
                                <p>加载中...</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 添加教师模态框（新增班级输入框） -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="addTeacherModal">
    <div class="bg-white/80 rounded-lg shadow-xl w-full max-w-md transform transition-all">
        <div class="bg-secondary p-4 rounded-t-lg">
            <h3 class="text-white/80 text-lg font-bold flex items-center">
                <i class="fa fa-user-plus mr-2"></i> 添加教师
                <button class="ml-auto text-white/80 hover:text-gray-200" id="closeTeacherModal">
                    <i class="fa fa-times"></i>
                </button>
            </h3>
        </div>
        <div class="p-6">
            <form id="addTeacherForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="teacherId">教师ID<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200" id="teacherId"
                           required
                           type="text">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="teacherName">姓名<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200" id="teacherName"
                           required
                           type="text">
                </div>
                <!-- 添加教师模态框 - 班级输入框 + 下拉框 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="teacherClass">所属班级 <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200"
                                id="teacherClass"
                                type="text"
                                placeholder="输入班级名称搜索或从下拉选择..."
                        >
                        <!-- 班级下拉框容器 -->
                        <div id="addTeacherClassDropdown" class="hidden absolute z-10 left-0 right-0 mt-1 bg-white shadow-lg rounded-md max-h-60 overflow-y-auto"></div>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="teacherAge">年龄<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200" id="teacherAge"
                           required
                           type="number">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="teacherSex">性别<span class="text-red-500">*</span></label>
                    <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200"
                            id="teacherSex"
                            required>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="teacherTeaching">科目</label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200" id="teacherTeaching"
                           type="text">
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelAddTeacher"
                            type="button">
                        取消
                    </button>
                    <button class="px-4 py-2 bg-secondary text-white/80 rounded-md hover:bg-secondary/90 transition-colors"
                            type="submit">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑教师模态框（新增班级输入框） -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="editTeacherModal">
    <div class="bg-white/80 rounded-lg shadow-xl w-full max-w-md transform transition-all">
        <div class="bg-warning p-4 rounded-t-lg">
            <h3 class="text-white/80 text-lg font-bold flex items-center">
                <i class="fa fa-pencil mr-2"></i> 编辑教师
                <button class="ml-auto text-white/80 hover:text-gray-200" id="closeEditTeacherModal">
                    <i class="fa fa-times"></i>
                </button>
            </h3>
        </div>
        <div class="p-6">
            <form id="editTeacherForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editTeacherId">教师ID(不可修改)<span class="text-red-500">！</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm bg-gray-100" id="editTeacherId"
                           readonly required type="text">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editTeacherName">姓名<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200" id="editTeacherName"
                           required
                           type="text">
                </div>
                <!-- 编辑教师模态框 - 班级输入框 + 下拉框 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editTeacherClass">所属班级 <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200"
                                id="editTeacherClass"
                                type="text"
                                placeholder="输入班级名称搜索或从下拉选择..."
                        >
                        <!-- 班级下拉框容器 -->
                        <div id="editTeacherClassDropdown" class="hidden absolute z-10 left-0 right-0 mt-1 bg-white shadow-lg rounded-md max-h-60 overflow-y-auto"></div>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editTeacherAge">年龄<span class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200" id="editTeacherAge"
                           required
                           type="number">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editTeacherSex">性别<span class="text-red-500">*</span></label>
                    <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200"
                            id="editTeacherSex"
                            required>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editTeacherTeaching">科目</label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring focus:ring-secondary/30 transition duration-200" id="editTeacherTeaching"
                           type="text">
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelEditTeacher"
                            type="button">
                        取消
                    </button>
                    <button class="px-4 py-2 bg-secondary text-white/80 rounded-md hover:bg-secondary/90 transition-colors"
                            type="submit">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="confirmDeleteModal">
    <div class="bg-white/80 rounded-lg shadow-xl w-full max-w-md transform transition-all">
        <div class="bg-danger p-4 rounded-t-lg">
            <h3 class="text-white/80 text-lg font-bold flex items-center">
                <i class="fa fa-trash mr-2"></i> 确认删除
            </h3>
        </div>
        <div class="p-6">
            <p class="text-gray-700 mb-6" id="deleteMessage">你确定要删除此记录吗？此操作不可撤销。</p>
            <div class="flex justify-end space-x-4">
                <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelDelete"
                        type="button">取消
                </button>
                <button class="px-4 py-2 bg-danger text-white/80 rounded-md hover:bg-danger/90 transition-colors" id="confirmDelete"
                        type="button">确认删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 页脚容器 -->
<div id="footerContainer"></div>

<!-- 引入css -->
<link href="../css/style.css" rel="stylesheet">
<!-- 引入JS -->
<script src="../js/index.js"></script>
<script src="../js/teacher.js"></script>
<script src="../js/style.js"></script>
</body>
</html>